<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2022-11-15 10:24:46
 * @LastEditTime: 2023-11-16 21:47:44
 * @LastEditors: sueRimn
-->
<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<custom-navbar title="常见问题" />
		<!-- #endif -->
		<view class="help-box">
			<view class="title">常见问题</view>
			<view class="item" v-for="(item, index) in helpList" :key="index">
				<view class="text d-flex justify-content-between align-content-center" @click="handleItem(index)">{{ item.title }}<uni-icons type="top" color="#999" size="16" v-if="active == index"></uni-icons><uni-icons type="bottom" color="#999" size="16" v-else></uni-icons></view>
				<view class="content" v-if="active == index">{{ item.summary }}</view>
			</view>
		</view>
	</view>
</template>

<script>

import { fetchArticleList } from '@/api'
export default {
	name: 'Help',
	components: {

	},
	data() {
		return {
			helpList: [],
			active: 0
		}
	},

	methods: {
		async loadHelpList() {
			fetchArticleList({ categoryId: 200005, size: 10 }).then(({ code, data }) => {
				if (code === 200) {
					this.helpList = data.rows || []
				}
			})
		},
		handleItem(index) {
			this.active = index
		}
	},
	onLoad(options) {
		this.loadHelpList()
	},

	onShareAppMessage() {
		return {
			title: '出手鸭',
			path: '/pages/help/index',
		}
	},
	onShareTimeline() {
		return {
			title: '出手鸭',
		}
	},
}
</script>

<style lang="scss" scoped>
.page {
	padding: 1rpx;
	height: 100vh;

	.help-box {
		background: #feffff;
		margin: 32rpx;
		padding: 24rpx;
		border-radius: 24rpx;

		.title {
			font-size: var(--hui-font-size-32);
			font-weight: 500;
			color: var(--hui-color-title);
			line-height: 48rpx;
			margin: 0 0 32rpx 0;
		}

		.item {
			.text {
				font-size: var(--hui-font-size-28);
				color: var(--hui-color-title);
				height: 60rpx;
			}
			.content {
				font-size: var(--hui-font-size-26);
				color: var(--hui-color-subtitle);
				height: 60rpx;
				margin: 0 0 20rpx 0;
			}
		}

	}
}
</style>
